<template>
	<view>
		<img class="bg-img" src="@appstatic/img/my/bg-img.jpg" alt="">
		<view class="search-father">
			<view class="search">
				<!-- <input class="uni-input" @input="onKeyInput" placeholder="搜索零售商" /> -->
				<u-search 
					class="uni-input" 
					placeholder="搜索零售商" 
					shape="square" 
					:showAction="false"
					v-model="searchData"
					@change="changeSearchData"
					@search="searchData"
					@clickIcon="searchData"
				></u-search>
				<view class="cancel" @click="cancel">
					<span>取消</span>
				</view>
			</view>
		</view>
		
		
		<scroll-view v-if="list.length!=0" scroll-y="true" @scrolltolower="handleToLower">
			<view class="result">
				<view class="row" v-for="(item,index) in list" @click="choose(item)">
					<view class="">
						<view class="ratailer-name">{{item.content}}</view>
						<view class="ratailer-address">{{item.address}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view v-if="list.length==0" class="result">
			<view class="notfound">
				<span>未找到匹配的零售商</span>
			</view>
		</view>
		
		<clxDialog 
			:isShow='diolog.show'
			 :title="diolog.title"
			:content="diolog.dialogContent" 
			@dialogConfirm='dialogConfirm'
			@dialogCancel='dialogCancel'>
		</clxDialog>
	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js");
	import clxDialog from "../../components/clx-dialog/clx-dialog";
	export default {
		components: {
			clxDialog,
		},
		data() {
			return {
				pagination:{
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 15,
					length: 100
				},
				searchContent:'',
				list:[
					{content:'经销商1',address:'辽宁省大连市xxxxx1-1-2'},
					{content:'经销商2',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商3',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商4',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商5',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商5',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商5',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商5',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商5',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商5',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商5',address:'辽宁省沈阳市xxxxx1-1-2'},
					{content:'经销商5',address:'辽宁省沈阳市xxxxx1-1-2'},
				],
				searchData:'',
				diolog:{
					show:false,
					title:'选择确认',
					dialogContent:'请正确选择车辆对应的零售商与经销商信息，以免对后期维保、售后服务产生影响。'
				}
			}
		},
		onShow: function(options){
			// this.showList(true);
		},
		methods:{
			showList(isRefresh){
				var that=this;
				var uri=app.globalData.config.interfaces.xxx
				var params={
					"pageNum":isRefresh?1:that.pagination.page,
					"pageSize":that.pagination.limit,
					"searchContent":that.searchContent,//搜索框里的内容
				}
				network.get(uri,prams,'form').then(res=>{
					if(res.code==200){
						var _list=res.data.list;
						var totalPage=Math.ceil(res.data.total / that.pagination.limit)
						if(isRefresh){
							that.pagination.totalPage=totalPage;
							that.list=_list ? _list:[]
						}else{
							if(_list && _list.length>0){
								that.list=[...that.list,..._list]
							}
						}
						if(that.pagination.page==that.pagination.totalPage){
							that.pagination.loadMore=false;
						}
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch
			},
			handleToLower(){
				if(this.pagination.loadMore){
					this.pagination.page+=1;
					this.showList(false)
				}else{
					uni.showToast({
						title:"暂无更多数据",
						duration: 3000,
						icon: 'none'
					})
				}
			},
			searchData(){//点击搜索键
				this.showList(true);
			},
			choose(item){//选择，弹出确认选择
				this.diolog.show =  true
			},
			dialogConfirm(){//确定选择
				this.diolog.show =  false
				
			},
			dialogCancel(){//取消选择
				this.diolog.show =  false
			},
			cancel(){//取消搜索，清空搜索内容
				this.searchData = ""
			},
			changeSearchData(){
				
			},
		}
	}
</script>

<style>
	page {
		/* background: url('@appstatic/img/my/bg-img.jpg') no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box; */
	}
</style>
<style scoped>
	.bg-img {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.search-father {
		position: sticky;
		top:0;
		z-index: 100;
		background-color: #F5F5F5;
	}
	.search {
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items:center;
		justify-content:space-between;
	}
	.uni-input {
		padding: 0px 0px 0px 16px;
		min-width: 0;
		flex: 1;
	}
	.cancel {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 58px;
		height: 36px;
	}
	.result {
		display: flex;
		flex-direction: column;
		padding-left: 24px;
		padding-right: 24px;
	}
	.row {
		height: 76px;
		display: flex;
		align-items: center;
		border-bottom: solid #EDEDED 1px;
	}
	.ratailer-name {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 32upx;
		line-height: 140%;
		display: flex;
		align-items: center;
		letter-spacing: -0.5px;
		color: #3D3A3A;
		padding-bottom: 8px;
	}
	.ratailer-address {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 28upx;
		line-height: 140%;
		display: flex;
		align-items: center;
		letter-spacing: -0.5px;
		color: #ADB0AE;
	}
	.notfound {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 32px;
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 28upx;
		line-height: 20px;
		color: #EA5404;
	}
</style>